<template>
    <div id="CollectMost">
      <div class="content">
        <ul class="contents">
          <li  v-for="collect in collectlist" :key="collect.menuId">
            <router-link :to="{name: 'DishDetails',params: {id: collect.menuId}}">
              <img :src="collect.menuSrc" alt="" class="cook-img">
          </router-link>
          <div class="cook-info">
            <router-link :to="{name: 'DishDetails',params: {id: collect.menuId}}">
                <div class="cook-nickname">{{collect.menuName}}</div>
            </router-link>
          <p class="major">{{collect.introduce}}</p>
          <div class="score">
            <span>
              收藏：
              <b>{{collect.collection}} </b>
            </span>
             <span>浏览：
              <b>{{collect.doh}} </b>
            </span>
          </div>
          <router-link :to="{name: 'CenterRecipes',params: {  userId:collect.userId}}">
            <div class="auther"><img class="auther-head" :src="collect.headImg" alt="">{{collect.nickname}}</div>
          </router-link>
            </div>
          </li>
        </ul>

      </div>
      <span v-show="displaycontent" class="nocontent">暂时没有更多的内容~</span>

    <div v-show="buttonpage">
 <el-pagination  background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNow"
      :page-sizes="[1, 2, 5, 10]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination></div>
    </div>
</template>
<script>
// import cookie from '../../../../cookien/index'
// import LoginVue from '../../../Login.vue'
export default {
  name: 'CollectMost',
  data () {
    return {
      searchmessage: '',
      pageNow: 1,
      pageSize: 1,
      collectlist: [],
      displaycontent: false,
      buttonpage: true,
      total: 0
    }
  },
  created () {
    this.collectMost()
  },
  methods: {
    collectMost () {
      this.$axios({
        method: 'get',
        url: '/Menu/Visitor/findAllMenuByCollectionNameLike',
        params: {
          pageNow: this.pageNow,
          pageSize: this.pageSize,
          key: this.$store.state.searchMsg
        },
        headers: {
          token: this.$store.state.token
        }
      }).then(data => {
        console.log(data.data.object.list)
        if (data.data.object.list.length === 0) {
          this.displaycontent = !this.displaycontent
          this.buttonpage = !this.buttonpage
        } else {
          this.collectlist = data.data.object.list
          this.total = data.data.object.list.length
        }
      })
    },
    // 监测当前一页有几条数据
    handleSizeChange (size) {
      this.pageSize = size
      this.SearchRecipe()
    },
    // 监测当前页数
    handleCurrentChange (num) {
      this.pageNow = num
      this.SearchRecipe()
    }
  }
}
</script>
<style lang="less" scoped>
.cook-nickname{
  padding-top: 8px;
  font-size: 18px;
  font-weight: bold;
  overflow: hidden;
  line-height: 18px;
  display: inline-block;
  width: 483px;
  margin-bottom: 14px;
  color:#333;
  &:hover{
    color: #FFB31A
    }
}
.content{
  min-height: 268px;
  }
.nocontent{
    margin: 40px;
    display: block;
    text-align: center;
    color: #999;
}
.contents{
  width: 100%;

  li{
    height: 100px;
    padding-bottom: 40px;
    .cook-img{
     width: 180px;
    height: 125px;
    float: left;
    border-radius: 8px;
    overflow: hidden;
    margin-right: 15px;
    }
    .cook-info{
      width: 495px;
    height: 125px;
    float: left;
    .cookname{
padding-top: 8px;
    font-size: 18px;
    font-weight: bold;
    overflow: hidden;
    line-height: 18px;
    display: inline-block;
    width: 483px;
    margin-bottom: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: #333;
    text-decoration: none;
    }
    .major{
      text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 14px;
    color: #2a2a2a;
    line-height: 14px;
    vertical-align: middle;
    }
    .score{
      margin: 11px 0 10px;
      span{
        text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 14px;
    color: #2a2a2a;
    line-height: 14px;
    vertical-align: middle;
      }
    }
    .auther{
      font-size: 14px;
    line-height: 22px;
    height: 24px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    .headicon{
      display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    img{
      display: inline-block;
    width: 21px;
    height: 21px;
    vertical-align: middle;
    border-radius: 50%;
    position: relative;
    top: -2px;
    }
      }
    }
    }
  }
}

.auther-head{
  display: inline-block;
  width: 21px;
  height: 21px;
  vertical-align: middle;
  border-radius: 50%;
    position: relative;
    top: -2px;
    padding-right: 10px;
}
.el-pagination{
  text-align: center;
}
</style>
